<template>
    <div class="app-container">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px">
            <el-form-item label="头像">
                <el-upload
                        class="avatar-uploader"
                        action="#"
                        :http-request="upAvatar"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                >
                    <img v-if="temp.avatar" :src="temp.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="temp.username" placeholder="请输入用户名" style="width:400px" disabled />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="temp.nickname" placeholder="请输入昵称" style="width:400px"/>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="temp.mobile" placeholder="请输入手机号" style="width:400px"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="temp.email" placeholder="请输入邮箱" style="width:400px"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="temp.password" show-password :placeholder="dialogType==='edit' ? '留空则不修改' : '请输入密码'" style="width:400px" />
            </el-form-item>
        </el-form>
        <div class="sub_button">
            <el-button type="primary" @click="updateAdmin()">提交更新</el-button>
        </div>
    </div>
  </template>
  
  <script>
    import { getadmin, updateAdmin} from '@/api/admin'
    import { upload } from '@/api/upload'

    export default {
        data() {
            return {
                temp: {
                    password: undefined,
                    avatar: ''
                }, 
                listLoading: true,
            }
        },
        created() {
            this.getinfo()
        },
        methods: {
            //获取信息
            getinfo(){
                this.listLoading = true
                getadmin().then(res => {
                    this.temp = res.data
                    this.listLoading = false
                })
            },
            // 更新管理员信息
            updateAdmin() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)
                        updateAdmin(tempData.id, tempData).then(res => {
                            this.getinfo()
                            this.dialogVisible = false
                            this.$notify({
                                title: '更新成功',
                                message: res.msg,
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
             // 头像上传，返回头像路径
             upAvatar(file) {
                const formData = new FormData()
                formData.append('file', file.file)
                upload(formData).then(res => {
                    this.temp.avatar = res.data
                })
            },
            handleAvatarSuccess(res, file) {
                this.headUrl = URL.createObjectURL(file.raw)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/png'
                const isLt3M = file.size / 1024 / 1024 < 3

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!')
                }
                if (!isLt3M) {
                    this.$message.error('上传头像图片大小不能超过 3MB!')
                }
                return isJPG && isLt3M
            }
        }
    }
  </script>
  
  <style lang="scss" scoped>
    .app-container {
        .roles-table {
            margin-top: 30px;
        }
        .permission-tree {
            margin-bottom: 30px;
        }
        ::v-deep {
            .el-dialog {
                .el-dialog__header {
                    border-bottom: 1px solid #ebebeb;
                }
                .el-dialog__footer {
                    border-top: 1px solid #ebebeb;
                }
            }
        }
    }
    .avatar-uploader{
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 62px;
        height: 62px;
    }
    .avatar-uploader:hover{
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
    .avatar {
        width: 60px;
        height: 60px;
        display: block;
    }
    .sub_button{
        width: 500px;
        height: 40px;
        display: flex;
        justify-content: flex-end;
    }
  </style>